<template>
	<section>
		<!--工具条-->
		<el-row class="toolbar" style="padding-bottom: 0px;" type="flex" >
      	<el-col :span="6"  style="float:right">
          <el-button @click="linkToPre"><i class="el-icon-arrow-left">返回</i></el-button>
        </el-col>
			<el-col :span="18"  style="float:right">
				<el-form :inline="true" :model="filters" style="float:right">

					<el-form-item >
						<el-select v-model="selections.province" style="width:140px;" placeholder="选择生源省份">
								<template v-for="(item,idx) in hasProvinces"  >
										<el-option :key="idx" :label="item.lable" :value="item.lable"></el-option>
								</template>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getUsers">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
    <el-row>画室名称:{{this.$store.state.studio.name}}</el-row>
    <el-row>总人数:{{this.$store.state.studio.studentsCount}}</el-row>
		<!--列表-->
		<el-table  :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" border style="width: 100%;">
			<!-- <el-table-column type="selection" width="55"></el-table-column> -->
			<el-table-column prop="id" label="准考证号"  header-align='center' align='center'>
			</el-table-column>
			<el-table-column prop="studentname" label="姓名" header-align='center'>
			</el-table-column>
			<el-table-column prop="identity" label="身份证号"  header-align='center'>
			</el-table-column>
			<el-table-column prop="province" label="生源省份" header-align='center'>
			</el-table-column>
		
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>



	
	</section>
</template>

<script>
	import util from '../../common/js/util'
	import { getStudioDetail } from '../../api/api';
	import studioModify from './studioModify'
	import studioAdd from './studioAdd'
	export default {
    components:{studioAdd,studioModify},
    computed:{studioname:function(){return this.$store.state.studio.selectedname}},
    watch:{studioname:function(newval,oldval){
      console.log(newval)
    }},
		data() {
			return {
				filters: {
          studioname: '',
          province:''
				},
				users: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
				selections:{
					province:'',//选择省份
				},
				hasProvinces:[{lable:'北京'},{lable:'上海'},{lable:'浙江'}],
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
			}
		},
		methods: {
      //跳转到上一页
      linkToPre:function(){
this.$router.push({path:'/studioTable'})
      },
			//性别显示转换
			formatSex: function (row, column) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//查询画室的考生+省份
			getUsers() {
				let para = {
					page: this.page,
          studioname: this.$store.state.studio.name,
          province:this.selections.province
        };
   
				this.listLoading = true;
				getStudioDetail(para).then((res) => {
					this.total = res.data.total;
          this.users = res.data.users;
          console.log(this.users)
					this.listLoading = false;
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					removeUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editForm = Object.assign({}, row);
			},
			
	
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style>
.el-button--small{
	padding: 1px 1px;
}
.el-dialog__header{
	text-align: center;
}
.el-dialog__title{
	font-size: 32px;
}
</style>